<template>
  <div class="box">
    <!-- 头部搜索模块 -->
    <headerSearch :selectObj="selectObject" :isShowAdd="false" :goSearchFc="searchClick"/>
    <!-- 中间表格模块 -->
    <BaseTable :data="cargotableData" :columns="cargotableDataColumns" :tableHeight="tableHeight" :pagination="false" :loading="loading"></BaseTable>
    <!-- 底部分页模块 -->
    <div class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryAll.startpage" :page-sizes="[10, 15, 20, 25, 30]" :page-size="queryAll.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- 新增组件模块 -->
    <div class="leftbox">
      <el-drawer :before-close="handleClose" title="海轮信息" :visible.sync="drawer" direction="rtl">
        <el-form ref="formRefs" size="small" :model="form">
          <el-tabs v-model="aciveName" @tab-click="handleTabsClick">
            <el-tab-pane label="基本信息" name="first" style="padding:0 20px">
              <el-form-item label="中文船名" :label-width="formLabelWidth">
                <el-input readonly v-model="form.nameCn"></el-input>
              </el-form-item>
              <el-form-item label="英文船名" :label-width="formLabelWidth">
                <el-input readonly v-model="form.nameEn"></el-input>
              </el-form-item>
              <el-form-item label="船长" :label-width="formLabelWidth">
                <el-input readonly v-model="form.shipLength"></el-input>
              </el-form-item>
              <el-form-item label="船型" :label-width="formLabelWidth">
                <el-input readonly v-model="form.shipTypeName"></el-input>
              </el-form-item>
              <el-form-item label="船籍代码" :label-width="formLabelWidth">
                <el-input readonly v-model="form.shipNationCode"></el-input>
              </el-form-item>
              <el-form-item label="船舶类型" :label-width="formLabelWidth">
                <el-input readonly v-model="form.shipKindName"></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="IMO" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.imoNo"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="MMSI" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.mmsi"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="呼号" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.callNo"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="速记码" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.shortCode"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="船高(总高度)" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.shipHeight"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="船宽" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.shipWidth"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="船舶自重" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.deadWeight"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="净吨" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.netTon"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="总吨" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.totalTon"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="舱口数" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.hatchNo"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="结构信息" name="second" style="padding:0 20px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="舱层数" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.cabinNo"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="载重吨" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.weightTon"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="仓容" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.storageCapacity"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="仓口尺寸" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.cabinSize"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="最大船速" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.topSpeed"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="航速" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.shipSpeed"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="型深" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.mouldedDepth"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="吊机数量" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.hangerNo"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="舱型" :label-width="formLabelWidth">
                <el-input readonly v-model="form.cabinType"></el-input>
              </el-form-item>
              <el-form-item label="吊机负荷" :label-width="formLabelWidth">
                <el-input readonly v-model="form.hangerLoad"></el-input>
              </el-form-item>
              <el-form-item label="机舱位置" :label-width="formLabelWidth">
                <el-input readonly v-model="form.cabinPositionCode"></el-input>
              </el-form-item>

              <el-form-item label="仓盖打开形式" :label-width="formLabelWidth">
                <el-input readonly v-model="form.cgdkfsCode"></el-input>
              </el-form-item>
              <el-form-item label="吊机位置" :label-width="formLabelWidth">
                <el-input readonly v-model="form.hangerForm"></el-input>
              </el-form-item>
              <el-form-item label="吊机类型" :label-width="formLabelWidth">
                <el-input readonly v-model="form.craneTypeCode"></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="其他信息" name="three" style="padding:0 20px">
              <el-form-item label="船长电话" :label-width="formLabelWidth">
                <el-input readonly v-model="form.captainPhone"></el-input>
              </el-form-item>
              <el-form-item label="建造年月" :label-width="formLabelWidth">
                <el-input v-model="form.buildDate"></el-input>
              </el-form-item>

              <el-form-item label="淡水容量" :label-width="formLabelWidth">
                <el-input readonly v-model="form.waterCapacity"></el-input>
              </el-form-item>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="富余水深" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.waterDepth"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="满载吃水" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.fullloadWater"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="空载吃水" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.unloadedDraft"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="头驾距离" :label-width="formLabelWidth">
                    <el-input readonly v-model="form.headerNum"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="船公司" :label-width="formLabelWidth">
                <el-input readonly v-model="form.shipCompany"></el-input>
              </el-form-item>
              <el-form-item label="船主" :label-width="formLabelWidth">
                <el-input readonly v-model="form.shipOwner"></el-input>
              </el-form-item>

              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input readonly type="textarea" v-model="form.remark"></el-input>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form>

        <div class="demo-drawer__footer">
          <el-button size="small" type="primary" @click="handlePass()">通 过</el-button>
          <el-button size="small" type="danger" @click="handleNoPass()">不 通 过</el-button>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import headerSearch from './component/headerSearch'
import { isObjectValueEqual } from '@/libs/date'

export default {
  name: 'metadataSeagoingAudit',
  components: {
    BaseTable,
    headerSearch
  },
  watch: {
    form: {
      handler(newVal, oldVal) {
        // console.log(isObjectValueEqual(newVal, oldVal))
        this.flagHint = isObjectValueEqual(newVal, oldVal)
      },
      deep: true
    }
  },
  data() {
    return {
      flagHint:false,
      // 搜索框显示对象
      selectObject:[
        {
          name:"海轮名称",
          type:"input",
          modelName:"namecn"
        },
        {
          name:"IMO",
          type:"input",
          modelName:"imono"
        }
      ],
      cargotableDataColumns: [
        {
          prop: 'nameCn',
          label: '中文船名'
        },
        {
          prop: 'nameEn',
          label: '英文船名'
        },
        {
          prop: 'shortCode',
          label: '速记码'
        },
        {
          prop: 'shipKindName',
          label: '船舶类型'
        },
        {
          prop: 'imoNo',
          label: 'IMO'
        },
        {
          prop: 'mmsi',
          label: 'MMSI'
        },
        {
          prop: 'callNo',
          label: '呼号'
        },
        {
          prop: 'shipLength',
          label: '船长'
        },
        {
          prop: 'shipHeight',
          label: '船高(总高度)'
        },
        {
          prop: 'shipWidth',
          label: '船宽'
        },
        {
          prop: 'shipCompany',
          label: '船公司'
        },
        {
          prop: 'shipOwner',
          label: '船主'
        },
        {
          prop: 'netTon',
          label: '净吨'
        },
        {
          prop: 'totalTon',
          label: '总吨'
        },
        {
          prop: 'weightTon',
          label: '载重吨'
        },
        {
          prop: 'deadWeight',
          label: '船舶自重'
        },
        {
          prop: 'hatchNo',
          label: '舱口数'
        },
         {
          prop: 'createName',
          label: '申报单位'
        },
         {
          prop: 'createTime',
          label: '申报时间'
        },
        {
          prop: 'mouldedDepth',
          label: '型深'
        },
        {
          prop: 'callNo',
          label: '呼号'
        },
        {
          prop: 'captainPhone',
          label: '船长电话'
        },
        {
          prop: 'shipTypeName',
          label: '船型'
        },
        {
          prop: 'shipNationName',
          label: '船籍代码'
        },
        {
          prop: 'cabinNo',
          label: '舱层数'
        },
        {
          prop: 'storageCapacity',
          label: '仓容'
        },
        {
          prop: 'cabinSize',
          label: '舱尺寸'
        },
        {
          prop: 'shipSpeed',
          label: '航速'
        },
        {
          prop: 'hangerNo',
          label: '吊机数量'
        },
        {
          prop: 'headerNum',
          label: '头驾距离'
        },
        {
          prop: 'craneTypeCode',
          label: '吊机类型'
        },
        {
          prop: 'hangerForm',
          label: '吊机位置'
        },
        {
          prop: 'hangerLoad',
          label: '吊机负荷'
        },
        {
          prop: 'waterDepth',
          label: '富余水深'
        },
        {
          prop: 'fullloadWater',
          label: '满载吃水'
        },
        {
          prop: 'waterCapacity',
          label: '空载吃水'
        },
        {
          prop: 'headerNum',
          label: '淡水容量'
        },
        {
          prop: 'cabinPositionCode',
          label: '机舱位置'
        },
        {
          prop: 'cabinType',
          label: '舱型'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h(
              'div',
              {
                class: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: "<span style='color:#EFAE12;'><i class='iconfont icon-1-011'></i><span  style='padding-left:5px;'>审核</span></span>"
                  },
                  on: {
                    click: () => {
                      click: this.handleAudit(params.row)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      cargotableData: [],
      loading: false,
      queryAll: {
        status: '0',
        namecn: '',
        imono: '',
        startpage: 1,
        pagesize: 10
      },
      total: 0,
      aciveName: 'first',
      drawer: false,
      form: {},
      formLabelWidth: '100px'
    }
  },
  async activated() {
    var menuArr = []
    var menuId = ""
    if(localStorage.getItem("menuArr")){
      menuArr = JSON.parse(localStorage.getItem("menuArr"))
    }
    menuArr.map(item=>{
      item.children.map(v=>{
        if(window.location.href.includes(v.url)){
          menuId = v.id
        }
      })
    })

    if(menuId){
      var menuData = []
      await this.$http.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`,{ timeout: 30000,})
              .then(res => {
                res.data.data.map(item=>{
                  menuData.push(item.resourceName)
                })

                if(!menuData.includes("审核")){
                  this.cargotableDataColumns.map((item,index)=>{
                    if(item.label == "操作"){
                      this.cargotableDataColumns.pop()
                    }
                  })
                }
              }).catch((error)=>{})
    }
     if(this.$store.state.app.searchResouce =="menu"){
           this.queryAll ={
            status: '0',
            namecn: '',
            imono: '',
            startpage: 1,
            pagesize: 10
          }
           this.getDataList()
        }

  },
  computed:{
      tableHeight:function(){
          return this.$store.state.tableHeight
      }
  },
  methods: {
    // 查询调用
    searchClick(searchData) {
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData);
      this.getDataList()
    },
    async getDataList() {
      this.loading = true
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/exshipsupplier/querypage`,
        {
          params: this.queryAll
        }
      ).then(res =>{
        this.cargotableData = res.data.data.pages
        // 分页
        this.startpage = res.data.data.pageNum
        this.pagesize = res.data.data.pageSize
        this.total = res.data.data.totalNum
        this.loading = false
      }).catch(error => {this.loading = false})
    },
    handleTabsClick() { },
    //审核事件
    handleAudit(row) {
      this.drawer = true
      this.form = row
      console.log(row)
    },
    //通过
    async handlePass() {
      delete this.form.shipTypeName
      delete this.form.shipKindName
      delete this.form.hatchType
      delete this.form.updateTime
      delete this.form.createTime
      delete this.form.maShipid
      delete this.form.index
      this.form.status = '1'

      this.form.buildDate = this.getEditPickDate(this.form.buildDate)
      console.log(this.form)
      await this.$http.put(
        `/${this.$ServiceName}/api/external/exshipsupplier/checkregister`,
        this.form
      ).then(res =>{
          this.$message.success(res.data.msg)
          this.getDataList()
          this.drawer = false
       }).catch(error => {})
    },
    async handleNoPass() {
      delete this.form.shipTypeName
      delete this.form.shipKindName
      delete this.form.hatchType
      delete this.form.updateTime
      delete this.form.createTime
      delete this.form.maShipid
      delete this.form.index

      this.form.status = '9'

      this.form.buildDate = this.getEditPickDate(this.form.buildDate)

      console.log(this.form)
      await this.$http.put(
        `/${this.$ServiceName}/api/external/exshipsupplier/checkregister`,
        this.form
      ).then(res =>{
        this.$message.success(res.data.msg)
        this.getDataList()
        this.drawer = false
       }).catch(error => {})
    },
    //更换时间格式
    getEditPickDate(date) {
      let newDate = null;
      if(date){
        newDate = new Date(date)
      }
      else{
        newDate = new Date()
      }
      const time =
        newDate.getFullYear() +
        '-' +
        (newDate.getMonth() + 1 + '').padStart(2, '0') +
        '-' +
        (newDate.getDate() + '').padStart(2, '0') +
        'T' +
        (newDate.getHours() + '').padStart(2, '0') +
        ':' +
        (newDate.getMinutes() + '').padStart(2, '0') +
        ':' +
        (newDate.getSeconds() + '').padStart(2, '0') +
        '.000Z'
      return time
    },
    // 分页事件
    handleSizeChange(val) {
      this.queryAll.pagesize = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      this.getDataList()
    },
    handleClose(done) {
      // if (this.flagHint) {
      //   this.$confirm('您已修改了数据，确定是否关闭？')
      //           .then(_ => {
      //             done()
      //           })
      //           .catch(_ => {})
      // } else {
        done()
    //   }
    }
  }
}
</script>

<style lang="less" scoped>
.selectBox {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-bottom: 0;
  border-bottom: 0;
  border-left: none;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 16px;
  padding-right: 24px;
}
.page {
  background: #ffffff;
  text-align: right;
  border-radius: 0 0 4px 4px;
  padding: 5px 20px;
}
/deep/.el-tabs__nav-scroll {
  margin: 0 20px;
}
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}
.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}
</style>
